{% extends "../layouts/admin.html" %} {% block content %}
<header class="header navbar bg-white shadow">

	<div class="btn-group tool-button">
		<a class="btn btn-primary navbar-btn" href="/store/region/add" data-pjax><i class="ti-plus"></i>新建地区</a>
		
	</div>

	
</header>

<div class="content-wrap">
	<div class="wrapper" style="min-height:500px;">
		<div class="row mb15">
			<div class="col-lg-12">

				<table id="treeTable" class="table no-m">
					<thead>
						<tr>
							<th class="col-md-3 pd-l-lg">
								<span class="pd-l-sm ml20"></span>地区名称
							</th>
							<th class="col-md-2">地区类型</th>
							<th class="col-md-2">操作</th>
						</tr>
					</thead>
					<tbody>
						{% for item in regions %}

						<tr data-tt-id="{{item.id}}" data-tt-parent-id="{{'0' if item.pid==0 else item.pid}}" data-tt-branch="{{'true' if item.type < 3 else 'false'}}">

							<td>
								{{item.name}}
							</td>
							
							<td>{{config.setup.regionType[item.type]}}</td>
							
							<td>
								<div class="btn-group">
									<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                  <i class="ti-settings"></i>
                  <span class="ti-angle-down"></span>
                </button>
									<ul class="dropdown-menu" role="menu">
										
										<li>
											<a href="/store/region/edit?id={{item.id}}" data-pjax>修改</a>
										</li>
										<li>
											<a href="javascript:;" onclick="del({{item.id}})">删除</a>
										</li>
										<li class="divider"></li>
										<li>
											<a href="/store/region/add?pid={{item.id}}" data-pjax>添加子地区</a>
										</li>
										
									</ul>
								</div>
							</td>
						</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<a class="exit-offscreen"></a>

<!-- 删除地区 -->
<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">删除地区</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						地区删除后无法恢复 <br />确定删除吗？ <br/>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
			</div>
		</div>
	</div>
</div>
<script>
	var treeTable;
	$(function() {
		
		treeTable = $("#treeTable").treetable({
			expandable: true,
			onNodeExpand: function() {
				var node = this;
				var rows = "<tr data-tt-id=\"loading\" data-tt-parent-id=\"" + node.id + "\" data-tt-branch=\"false\"><td colspan='5'><img src=\"/assets/img/loading.gif\"/>loading</td></tr>";
				treeTable.treetable("loadBranch", node, rows);
				$.post("/store/region/child", {
					pid: node.id
				}, function(data) {
					treeTable.treetable("unloadBranch", node);
					treeTable.treetable("loadBranch", node, data);
				});
			}
		});
		

	});
	function del(id) {
		var dialog = $("#dialogDelete");
		dialog.modal("show");
		dialog.find("#ok").unbind("click");
		dialog.find("#ok").bind("click", function(event) {
			var btn = $(this);
			btn.button("loading");
			$.post("/store/region/delete", {id: id}, function(data) {
				//重置按钮状态，关闭提示框
				dialog.modal("hide");
				btn.button("reset");
				if(data.errno == 0) {
					Toast.success(data.data);
					
					treeTable.treetable("removeNode", id);
					//从表格中移除此行
				} else {
					Toast.error(data.errmsg);
				}
				
			}, "json");
		});
	}
</script>
{% endblock %}